import CountTo from './CountTo.vue';
const queryNumberComponent = function (model, option, { value, onInput, focus }) {
    let h = this.$createElement;
    return <el-input-number v-focus={{ focus }} precision={2} value={value} controls={false} onInput={onInput} controls-position="right" ></el-input-number>

}
const querySelectComponent = function (model, option, { value, onInput, optionList }) {
    let h = this.$createElement;
    return <el-select filterable value={value} onInput={onInput} clearable >
        {optionList.map(option =>
            <el-option
                key={option.id}
                label={option.label}
                value={option.id}>
            </el-option>
        )
        }
    </el-select >
}
const queryCountToComponent = function (model, option, { value, customId }) {
    let h = this.$createElement;
    return <div style="width: 100%;minHeight: 28px" onClick={() => this.touchDisplayList.splice(0, 1, customId)}><CountTo value={value} /></div>
}
const setYearConfig = function (id, dateOpenForecast) {
    let y = Number(dateOpenForecast.split('-')[0]);
    let m = Number(dateOpenForecast.split('-')[1]);
    let monthTableOption = [];
    for (let i = 0; i < 12; i++) {
        m += 1;
        if (m > 12) {
            y += 1;
            m = 1;
        }
        monthTableOption.push({
            label: '' + y + (m < 10 ? '0' + m : m),
            width: 150,
            align: 'right',
            renderView(row, option, $index, colIndex) {
                let currentObj = this.financialForecastInfos.find(item => item.financialRateInfo.yearSequence === id && item.financialRateInfo.type === row.type);
                let model = currentObj.financialMonthlyInfos.find(item => item.monthKey === option.label);
                if (!model) {
                    model = {
                        monthKey: option.label,
                        monthValue: '1'
                    }
                    currentObj.financialMonthlyInfos.push(model)
                };
                let customId = `${id}-${$index}-${colIndex}`;
                return <div class="custom-input-box">
                    <i class="el-icon-edit"></i>
                    {!this.touchDisplayList.includes(customId)
                        ? queryCountToComponent.call(this, row, option, {
                            value: model['monthValue'],
                            customId
                        })
                        : queryNumberComponent.call(this, row, option, {
                            value: model['monthValue'],
                            onInput: (value) => {
                                this.$set(model, 'monthValue', value)
                            },
                            customId,
                            focus: true
                        })
                    }
                </div>
            },
        });
    }
    return monthTableOption
};
// 通用配置
const queryGeneralConfiguration = function (label, id) {
    return [
        {
            label,
            prop: 'type',
            width: 120,
            fixed: 'left',
            renderView(row, { prop }) {
                return row[prop]
            },
        },
        {
            label: '基础信息/月均费用',
            prop: 'feeAverageMonthly',
            width: 150,
            fixed: 'left',
            renderView(row, option, $index, colIndex) {
                let model = this.financialForecastInfos.find(item => item.financialRateInfo.yearSequence === id && item.financialRateInfo.type === row.type);
                if (!model) {
                    model = {
                        financialRateInfo: {
                            yearSequence: id,
                            type: row.type
                        },
                        financialMonthlyInfos: []
                    }
                    this.financialForecastInfos.push(model)
                };
                return <div class="custom-input-box">
                    <i class="el-icon-edit"></i>
                    {queryNumberComponent.call(this, row, option, {
                        value: model.financialRateInfo[option.prop],
                        onInput: (value) => {
                            model.financialMonthlyInfos.forEach(item => this.$set(item, 'monthValue', value))
                            this.$set(model.financialRateInfo, option.prop, value)
                        }
                    })}
                </div>
            },
            align: 'right',
            rules: [{ required: true, trigger: ["blur", "change"], message: `请将${label}中的基础信息/月均费用补全!` }]
        },
        {
            label: '适用费率',
            prop: 'rateApplicable',
            width: 150,
            fixed: 'left',
            optionList: [],
            align: 'right',
            renderView(row, option, $index, colIndex) {
                let model = this.financialForecastInfos.find(item => item.financialRateInfo.yearSequence === id && item.financialRateInfo.type === row.type);
                if (!model) {
                    model = {
                        financialRateInfo: {
                            yearSequence: id,
                            type: row.type
                        },
                        financialMonthlyInfos: []
                    }
                    this.financialForecastInfos.push(model)
                };
                let customId = `${id}-${$index}-${colIndex}`;
                return <div class="custom-input-box">
                    {['SD00210005', 'SD00210006'].includes(row.type) && <i class="el-icon-edit"></i>}
                    {!['SD00210005', 'SD00210006'].includes(row.type) ? queryCountToComponent.call(this, row, option, {
                        value: model.financialRateInfo[option.prop],
                        customId
                    }) :
                        querySelectComponent.call(this, row, option, {
                            value: model.financialRateInfo[option.prop],
                            onInput: (value) => {
                                model.financialMonthlyInfos.forEach(item => this.$set(item, 'monthValue', value))
                                this.$set(model.financialRateInfo, option.prop, value)
                            },
                            optionList: Array.from({ length: 3 }, (t, i) => ({ label: `第${i + 1}年`, id: `SD0002000${i + 2}` }))
                        })
                    }
                </div>
            },
            align: 'right'
        },
        ...setYearConfig(id, '2022-11-24')
    ]
}
// 基础行数据
const queryBaseRowData = function () {
    return [
        {
            label: '保底销售流水目标'
        },
        {
            label: '预计可达成流水'
        },
        {
            label: '销售折扣'
        },
        {
            label: '商店扣点'
        },
        {
            label: '商店租金'
        },
        {
            label: '商店物业管理费'
        },
    ]
};
export { queryGeneralConfiguration, queryBaseRowData }